<template>
  <div v-if="h5">
    <van-divider
      v-if="item.options.title"
      :content-position="item.options.titlePosition"
      :dashed="isDashed"
      :vertical="vertical"
      :hairline="false"
    >
      {{ item.options.title }}
    </van-divider>
    <van-divider
      v-else
      :content-position="item.options.titlePosition"
      :dashed="isDashed"
      :vertical="vertical"
      :hairline="false"
    >
    </van-divider>
  </div>
  <widget-form-item v-else :designer="designer" :widget-list="widgetList" :item="item" :index="index">
    <el-divider
      :direction="item.options.direction"
      :content-position="item.options.titlePosition"
      :border-style="lineStyle"
      style="margin: 12px 0"
    >
      {{ item.options.title }}
    </el-divider>
  </widget-form-item>
</template>

<script>
import props from './props'
import field from './field'
import { computed } from 'vue'

export default {
  name: 'MDivider',
  props,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // pc分割线样式
    const lineStyle = computed(() => {
      if (props.item.options.lineStyle === 'dashed') {
        return 'dashed'
      }
      return 'double'
    })

    // 是否使用虚线
    const isDashed = computed(() => {
      return props.item.options.lineStyle === 'dashed'
    })

    // 是否使用垂直
    const vertical = computed(() => {
      return props.item.options.direction === 'vertical'
    })

    return {
      ...field(props, emit),
      lineStyle,
      isDashed,
      vertical
    }
  }
}
</script>
